<template>
  <div class="order-cell" @click="onCellClick">
    <van-cell-group >
      <van-cell class="order-cell-header">
        <div>
          <div>下单时间：{{formatTime(item.createTime)}}</div>
          <div style="font-size: 12px; color: #969799;">订单编号：{{item.orderSn}}</div>
          <div style="font-size: 12px; color: #969799;">订单金额：{{formatMoney(item.totalAmount)}}</div>
        </div>
        <div>
          <van-tag round type="primary" class="float-right">{{formatState(item.status)}}</van-tag>
        </div>
      </van-cell>
      <van-cell>
        <template #title>
          <div class="order-address">
            <div class="order-member—info-div">{{item.receiverName}}</div>
            <div class="order-member—info-div">{{item.receiverPhone}}</div>
            <div>{{item.receiverProvince+item.receiverCity+item.receiverRegion+item.receiverDetailAddress}}</div>
          </div>
        </template>
      </van-cell>
      <van-cell>
        <van-cell-group>
          <slot name="goods">
            <van-card
              num="2"
              price="2.00"
              desc="描述信息"
              title="商品标题"
              thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
            />
          </slot>
        </van-cell-group>
      </van-cell>

      <van-cell-group >
        <van-cell title="">
          <template #default>
        <div v-if="item.status==1" >
          <van-button
            round size="small"
            type="primary"
            v-if="item.deliveryType ==0"
            @click="handleChangeState(item)"
          >发货</van-button>
          <van-button
            round size="small"
            type="primary"
            v-else-if="item.deliveryType ==1"
            @click="handleChangeState(item)"
          >备货完成</van-button>
          <van-button
            round size="small"
            type="primary"
            v-else-if="item.deliveryType ==2"
            @click="handleChangeState(item)"
          >通知送货</van-button>
          <van-button
            round size="small"
            type="primary"
            v-else-if="item.deliveryType ==3"
            @click="handleChangeState(item)"
          >呼叫骑手</van-button>
        </div>
        <div v-if="item.status==2">
          <van-button
            round size="small"
            type="primary"
            v-if="item.deliveryType ==0"
            @click="handleScandelivery(item)"
          >查询物流</van-button>
          <van-button
            round
            size="small"
            type="primary"
            v-else-if="item.deliveryType ==1"
            @click="handleScandelivery(item)"
          >提醒卖家取货</van-button>
          <van-button
            round size="small"
            type="primary"
            v-else-if="item.deliveryType ==2"
            @click="handleScandelivery(item)"
          >配送查询</van-button>
          <van-button
            round size="small"
            type="primary"
            v-else-if="item.deliveryType ==3"
            @click="handleScandelivery(item)"
          >配送查询</van-button>
        </div>
          </template>
        </van-cell>
      </van-cell-group>
    </van-cell-group>

    <van-dialog
      v-model="deliveryshow"
      :title="editData.deliveryType | formatDeliveryType"
      @confirm="onCommit"
      show-cancel-button
    >
      <van-field
        v-model="deliveryParam.deliverySn"
        autosize
        label="物流单号"
        type="text"
        placeholder="请输入物流单号"
        show-word-limit
        v-if="editData.deliveryType ==0"
      />
      <van-field
        v-model="deliveryParam.deliveryCompany"
        autosize
        label="物流公司"
        type="text"
        placeholder="请输入物流公司"
        show-word-limit
        v-if="editData.deliveryType ==0"
      />
    </van-dialog>
  </div>
</template>
<script>
import { formatDate } from "@/utils/date";


import { productOrderDelivery } from "@/api/product";
export default {
  name: "order_cell",
  filters: {
    formatDeliveryType(status) {
      if (status == 0) {
        return "推荐中";
      } else if (status == 1) {
        return "备货完成";
      } else if (status == 2) {
        return "通知送货";
      } else if (status == 3) {
        return "呼叫骑手";
      }
    }
  },
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  data: () => ({
    editData: {},
    deliveryshow: false,
    deliveryParam: {
      id: undefined,
      deliverySn: undefined,
      deliveryCompany: undefined,
      deliveryType: undefined
    }
  }),
  methods: {
    formatMoney(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    },
    formatTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(
        time
          .substr(0, 19)
          .replace(/-/g, "/")
          .replace("T", " ")
      );
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    formatState(state) {
      //订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单',
      if (state == 0) {
        return "待付款";
      } else if (state == 1) {
        return "待发货";
      } else if (state == 2) {
        return "已发货";
      } else if (state == 3) {
        return "已完成";
      } else if (state == 4) {
        return "已关闭";
      } else if (state == 5) {
        return "无效订单";
      } else {
        return "-";
      }
    },
    onCommit() {
      this.deliveryParam.deliveryType = this.editData.deliveryType;
      this.deliveryParam.id = this.editData.id;
      productOrderDelivery(this.deliveryParam).then(response => {
        this.$emit('valueChange')
   
      });
    },
    handleChangeState(item) {
      this.editData = item;
      this.deliveryshow = true;
    },
    handleScandelivery(){
      window.location.href = 'tel://0755637'
    },
    onCellClick(){
      this.$emit("click",this.item.id)
    }
  }
};
</script>

<style lang="scss" scoped>
.order-cell {
  margin-top: 8px;
  box-shadow: 1px 1px 5px #dedede;
}
.order-member—info-div {
  margin-right: 8px;
  display: inline;
}
.order-address {
  font-size: 14px;
  color: #969799;
}
.order-cell-header {
  position: relative；;
}

.float-right {
  position: absolute;
  top: 50%;
  right: 0;
  margin-right: 10px;
}
</style>